<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:1000px;border: solid 1px black;margin: 0 auto;overflow: hidden;}
        .box .cont{width:250px;border:solid 1px black;box-sizing: border-box;float: left;}
        .box .cont img{width:90%;display: block;margin: 0 auto;}
        .box .cont p{line-height:20px;height:40px;overflow: hidden;}
        .box .cont .addCart{display: block;margin: 0 auto;}
    </style>
</head>
<body>
    <h2>这是商品列表页面，<a href="./3购物车.html">去结算</a></h2>
    <div class="box"></div>
</body>
<script>
    const data = [{
        img:"https://img13.360buyimg.com/n7/jfs/t1/115356/35/31091/95527/63ad2f36F0e41e572/fb6f7777a4a305fe.jpg",
        price:"2999.00",
        name:"新款星盖世X13Pro真八核超薄智能手机可用5G移动联通电信卡4g全网通",
        id:"jahgush"
    },{
        img:"https://img10.360buyimg.com/n7/jfs/t1/210849/32/29260/67396/63aae842F5e680227/d1a140fa9b940746.jpg",
        name:"小米13 徕卡光学镜头 第二代骁龙8处理器 超窄边屏幕 120Hz高刷",
        price:"1999.00",
        id:"sdguin"
    },{
        img:"https://img13.360buyimg.com/n7/jfs/t1/75392/9/21179/69835/63f85c0aFbd990847/ce1fb3de7563b3f2.jpg",
        name:"OPPO K9x 8GB+128GB 银紫超梦 天玑810 5000mAh长续航 33W快充 90Hz电竞",
        price:"3500.00",
        id:"5675890"
    },{
        img:"https://img12.360buyimg.com/n7/jfs/t1/170685/27/29148/45071/63f85d18Fcec98481/ed216471c0008672.jpg",
        name:"OPPO K10x 极光 8GB+128GB 67W超级闪充 5000mAh长续航 120Hz高帧屏 6400",
        price:"699.00",
        id:"8w76bgf"
    }];

    class List{
        constructor(){
            this.box = document.getElementsByClassName("box")[0];
            // 绑定事件（事件委托）
            this.addEvent();
            // 模拟获取数据
            this.getData();
        }
        getData(){
            this.data = data;
            // 渲染页面
            this.render();
        }
        render(){
            // 通过字符串拼接页面结构
            let str = ""
            this.data.forEach(val=>{
                str += `<div class="cont" myid="${val.id}">
                            <img src="${val.img}" alt="">
                            <p>${val.price}</p>
                            <p>${val.name}</p>
                            <input type="button" value="加入购物车" class="addCart">
                        </div>`
            })
            // 将页面结构设置到指定容器
            this.box.innerHTML = str;
        }
        addEvent(){
            const that = this;
            this.box.onclick = function(eve){
                if(eve.target.className === "addCart"){
                    // 获取当前点击商品的唯一id
                    const id = eve.target.parentNode.getAttribute("myid");
                    // 通过唯一id获取唯一的商品
                    that.oneData = that.getOneData(id);
                    // 向本地存储中存储商品数据
                    that.setLocal();
                }
            }
        }
        getOneData(id){
            let index = 0;
            const flag = this.data.some((val,idx)=>{
                index = idx;
                return val.id === id;
            })
            if(flag){
                return this.data[index];
            }else{
                return {};
            }
        }
        setLocal(){
            // console.log(this.oneData)

            // 思考：购物车中的数据
            // 一个购物车存一条数据，这一条数据内包含多个商品，每个商品只出现一次，但有数量属性用来记录个数
            // [{img,name,price,id,num:1},{...},...]

            // 初始读取将来可能存在的购物车数据（将来设置时必须设置读取是的名字）
            let goods = localStorage.getItem("goods");
            goods = goods ? JSON.parse(goods) : [];
            
            // 判断本次商品是否已经存在购物车中（如果购物车信息为空，肯定查不到本次商品）
            let i = null;
            const flag = goods.some((val, idx)=>{
                i = idx;
                return val.id === this.oneData.id;
            })
            if(flag){
                // 是重复商品
                goods[i].num++
            }else{
                // 不是重复商品
                goods.push({
                    ...this.oneData,
                    num:1
                })
            }

            // 设置本地存储（注意设置成最初读取时的名字）
            localStorage.setItem("goods", JSON.stringify(goods));
        }
    }
    new List;



    
</script>
</html>